<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>ToolTip效果</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <style>
        body {
            font-size: 18px;
            line-height: 1.8;
            font-family: "Microsoft YaHei", "微软雅黑";
        }

        #demo {
            width: 500px;
            margin: 30px auto;
            padding: 20px 30px;
            position: relative;
            background-color: #fff;
        }

        #demo h2 {
            color: #03F;
        }

        #demo .tooltip {
            color: #03F;
            cursor: help;
        }

        .ui-tooltip {
            min-width: 500px;
        }

    </style>
</head>

<body>
<div id="demo">
    <p><a class="tooltip" id="tooltip1" title="">慕课网</a>的使命是传播互联网最前沿技术，帮助更多的人实现梦想！在慕课网前端开发、
        <a class="tooltip" id="tooltip2" title="">Android</a>开发、<a class="tooltip" id="tooltip3" title="">iOS</a>开发等课程统统有，你还在等什么，赶紧来学习吧。
    </p>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
    $(document).ready(function () {
        $(".tooltip").bind("mouseleave",function (event) {
            //此处代码是防止鼠标移开链接但还在tooltip提示框内时tooltip隐藏
            event.stopImmediatePropagation();

            var fixed = setTimeout('$("[title]").tooltip("close")', 500);
            $(".ui-tooltip").hover(
                    function () {
                        clearTimeout(fixed);
                    },
                    function () {
                        $("[title]").tooltip("close");
                    }
            );
        }).tooltip({
                    content : function () {
                        var element = $(this);
                        switch (element.attr("id")) {
                            case "tooltip1":
                                return '<iframe src="http://baike.baidu.com/view/10962527.htm" width="480" height="300"></iframe>';
                            case "tooltip2":
                                return '<iframe src="http://baike.baidu.com/subview/1241829/9322617.htm" width="480" height="300"></iframe>';
                            case "tooltip3":
                                return '<iframe src="http://baike.baidu.com/subview/158983/8747673.htm" width="480" height="300"></iframe>';
                            default :
                                return '';
                        }
                    }
                });

    });
</script>
</body>
</html>

